<template>
	<view :id="id" :type="type" class="common-bottom-toast">
		<view class="bottom__toast flex-x">
			<view class="item12-2 flex-x center">
				<view @tap="home" class="bottom-func flex-y">
					<i style="color:#EBB566" class="iconfont iconshouye1" />
					首页
				</view>
			</view>
			
			<view class="item12-10">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		} ,
		data() {
			return {
				isShow: false
			}
		} ,
		methods: {
			home: function () {
				console.log('首页')
			} ,
			share: function () {
				this.isShow = !this.isShow
			} ,
			collect: function () {
				console.log('收藏')
			} ,
			wechat: function () {
				console.log('微信分享')
			},
			poster: function () {
				console.log('海报分享')
			},
			copyLink: function () {
				console.log('链接分享')
			},
		} ,
		props: {
			// 类型
			type: {
				type: String ,
				default: '0'
			} ,
			id: {
				type: String ,
				default: ''
			}
		}
	}
</script>

<style>
	.bottom__cancel {
		border-top: 2rpx solid #CDCDCD;
		text-align: center;
		width: 100vw;
		height: 80rpx;
		font-size: 24rpx;
		line-height: 80rpx;
		position: absolute;
		bottom: 0;
		color: #CDCDCD;
	}
	
	.common-bottom-toast {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #FFFFFF;
		border-top: 4rpx solid #F5F3F4;
	}
	
	.bottom__toast {
		padding: 10rpx 30rpx;
	}
	
	.bottom__toast .bottom-func {
		text-align: center;
		font-size: 24rpx;
		margin-right: 30rpx;
	}
	
	.bottom__toast i {
		font-size: 48rpx;
	}
	
	.share__btn {
		font-size: 24rpx;
		line-height: 36rpx;
	}
	
	.icon__group {
		margin: 30rpx 0 10rpx 0;
		width: 68rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		background-color: #F6F6FE;
		border-radius: 100%;
	}
	
	.icon__group i{
		font-size: 46rpx;
	}
</style>
